<template>
  <div class="box">
    <p class="title">{{ title }}</p>
    <div class="list" v-for="item in listArr" :key="item.id">
      <p>{{ item.list }}：</p>
      <p>
        {{ (item.listValue = "" ? '' : item.listValue) }}
        <img class="code" v-show="item.list == '二维码'" src="../../img/骑手图片/u6826.png" alt />
      </p>
      <p class="detail" v-show="item.hasDetail">详情</p>

    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: "取货详情"
  },
  listArr: {
    type: Array,
    default: [
      {
        list: "取货号",
        id: 1,
        listValue: "OX23D4"
      },
      {
        list: "取货门店",
        id: 2,
        listValue: "来哈哈哈哈哈哈哈"
      },
      {
        list: "二维码",
        id: 3,
        listValue: ""
      }
    ]
  }
});
</script>

<style scoped>
.box {
  padding: 2.667vw;
  margin: 5vw;
  background: white;
  border-radius: 2.667vw;
}

.title {
  font-weight: bold;
  border-left: 1vw solid red;
  padding-left: 4vw;
  margin-left: 2vw;


}

.list {
  display: flex;
  margin: 5.333vw 0;
}

.list>p:nth-child(1) {
  width: 26.667vw;
  text-align: right;
  margin-right: 5.333vw;
  font-weight: bold;
  font-size: 4vw;
}

.list>p:nth-child(2) {
  flex: 1;
  font-size: 3.467vw;
}

.code {
  width: 34.667vw;
  height: 34.667vw;
}
.detail{
  font-size: 2.667vw;
  color: #ccc;
}
</style>